<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格实例测试</title>
</head>

<body>

  <table>
    <tr>
      <th>ID</th>
      <th>产品名称</th>
      <th>销量</th>
    </tr>
    <tr>
      <td>2021090901</td>
      <td>马克杯</td>
      <td>5000</td>
    </tr>
    <tr>
      <td>2021090901</td>
      <td>啤酒杯</td>
      <td>5200</td>
    </tr>
    <tr>
      <td>2021090901</td>
      <td>搪瓷杯</td>
      <td>3500</td>
    </tr>
    <tr class=a1>
      <td colspan="2"; style="text-align: left;">合计</td>
      <td>13700</td>
    </tr>
  </table>

</body>

<style>
  table {
    /* 使相邻单元格的边框合并在一起 */
    border-collapse: collapse;
    width: 604px;
    height: 244px;
  }

  th,td {
    border: 2px solid rgb(255, 170, 216);
    padding: 8px;
    text-align: center;
  }

  .a1{
    background-color: rgb(202, 222, 253);
  }
 
 .a1 >td{
    font-weight: bold;
  }
</style>

</html>